<template>
  <div class="add-main">
    <div class="main-title">
        添加后端URL
    </div>
    <div class="main-url">
        <el-input
            type="text"
            placeholder="输入后端权限URL"
            v-model="URL"
            clearable
            class="url-input"
            size="medium">
        </el-input>
    </div>
    <div class="main-msg">
        <el-input
            placeholder="输入备注"
            v-model="msg"
            clearable
            class="msg-input"
            size="medium">
        </el-input>
    </div>
    <div class="operator">
        <el-button type="success" plain @click="this.submit()">
            提交
        </el-button>
        <el-button type="danger" plain @click="this.$router.back">
            取消
        </el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request.js';
import setHeader from '@/api/tools/setHeaders.js'
export default {
    data(){
        return{
            URL: '',
            msg: '',
        }
    },
    methods:{
        submit(){
            let headers = setHeader()
            request.post('/api/system/addRole',{'url':this.URL,'msg':this.msg},{'headers':headers}).then(res=>{
                this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.add-main{
    background-color: white;
    width: 500px;
    height: 300px;
    margin-left: 20px;
    box-shadow: 2px 0px 11px rgb(211, 211, 211);
    border-radius: 15px;
    position: absolute;
    top: 100px;
    z-index: 100;
    .main-title{
        padding-top: 40px;
        padding-left: 50px;
        font-size: 26px;
        font-weight: 900;
        color: rgb(63, 72, 80);
    }
    .main-url{
        display: flex;
        .url-input{
            width: 400px;
            margin-left: 50px;
            margin-top: 20px;
        }
    }
    .main-msg{
        display: flex;
        .msg-input{
            width: 400px;
            margin-left: 50px;
            margin-top: 10px;
        }
    }
    .operator{
        padding-top: 20px;
        padding-left: 50px;
    }
}
</style>